<!-- FusionStrategySandbox.vue -->
<template>
  <div class="fusion-sandbox">
    <div class="panel-header">
      <h2><el-icon><Cpu /></el-icon> 融合策略沙盒</h2>
      <div class="active-strategy">
        <el-tag type="warning" size="large">激活策略: {{ activeStrategy.label }}</el-tag>
      </div>
    </div>

    <div class="strategy-panels">
      <div class="control-panel">
        <h3>融合策略参数</h3>
        <div class="strategy-selector">
          <el-radio-group v-model="strategyType" size="small">
            <el-radio-button label="weight">加权融合</el-radio-button>
            <el-radio-button label="attention">注意力机制</el-radio-button>
          </el-radio-group>
        </div>

        <div class="parameter-controls">
          <div class="param-section">
            <div class="param-header">
              <div class="param-title">信号特征权重</div>
              <div class="param-value">{{ signalWeight }}%</div>
            </div>
            <el-slider
                v-model="signalWeight"
                :marks="weightMarks"
                :step="5"
            />
          </div>

          <div class="param-section">
            <div class="param-header">
              <div class="param-title">图像特征权重</div>
              <div class="param-value">{{ imageWeight }}%</div>
            </div>
            <el-slider
                v-model="imageWeight"
                :marks="weightMarks"
                :step="5"
            />
          </div>

          <div class="attention-section" v-show="strategyType === 'attention'">
            <div class="attention-inputs">
              <div class="input-group">
                <label>Query因子</label>
                <el-input-number
                    v-model="attentionParams.query"
                    :min="0.1"
                    :max="2"
                    :step="0.1"
                    size="small"
                    controls-position="right"
                />
              </div>
              <div class="input-group">
                <label>Key因子</label>
                <el-input-number
                    v-model="attentionParams.key"
                    :min="0.1"
                    :max="2"
                    :step="0.1"
                    size="small"
                    controls-position="right"
                />
              </div>
              <div class="input-group">
                <label>Value因子</label>
                <el-input-number
                    v-model="attentionParams.value"
                    :min="0.1"
                    :max="2"
                    :step="0.1"
                    size="small"
                    controls-position="right"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="visualization-panel">
        <h3>融合策略示意图</h3>
        <div class="strategy-visualization">
          <div ref="strategyChart" class="strategy-chart"></div>
        </div>

        <div class="performance-indicators">
          <div class="indicator-card">
            <div class="indicator-title">信号特征贡献度</div>
            <div class="indicator-value">{{ signalWeight }}<span>%</span></div>
            <div class="indicator-progress">
              <el-progress
                  :percentage="signalWeight"
                  :format="() => ''"
                  :stroke-width="12"
                  status="success"
              />
            </div>
          </div>
          <div class="indicator-card">
            <div class="indicator-title">图像特征贡献度</div>
            <div class="indicator-value">{{ imageWeight }}<span>%</span></div>
            <div class="indicator-progress">
              <el-progress
                  :percentage="imageWeight"
                  :format="() => ''"
                  :stroke-width="12"
              />
            </div>
          </div>
          <div class="indicator-card">
            <div class="indicator-title">策略性能评分</div>
            <div class="indicator-value">{{ strategyScore }}<span>/100</span></div>
            <div class="indicator-progress">
              <el-progress
                  :percentage="strategyScore"
                  :format="() => ''"
                  :stroke-width="12"
                  :status="strategyScore > 80 ? 'success' : strategyScore > 60 ? '' : 'exception'"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
import * as echarts from 'echarts'
import {ElIcon, ElInputNumber, ElProgress, ElRadioButton, ElRadioGroup, ElSlider, ElTag} from "element-plus";
import {Cpu} from "@element-plus/icons-vue";

const strategyType = ref('weight')
const signalWeight = ref(60)
const imageWeight = ref(40)
const weightMarks = ref({
  0: '0%',
  25: '25%',
  50: '50%',
  75: '75%',
  100: '100%'
})

const attentionParams = ref({
  query: 1.2,
  key: 0.8,
  value: 1.0
})

const activeStrategy = ref({
  id: 1,
  label: '自适应加权融合',
  desc: '基于特征质量的动态加权'
})

const strategyChart = ref(null)
let strategyInstance = null

const strategyScore = computed(() => {
  if (strategyType.value === 'weight') {
    // 加权策略评分算法
    return Math.min(100, Math.floor(70 + (Math.abs(signalWeight.value - 50) + Math.abs(imageWeight.value - 50)) / 2))
  } else {
    // 注意力机制评分算法
    const factor = (attentionParams.value.query + attentionParams.value.key + attentionParams.value.value) / 3
    return Math.min(100, Math.floor(60 + factor * 15))
  }
})

onMounted(() => {
  initStrategyChart()

  onBeforeUnmount(() => {
    strategyInstance && strategyInstance.dispose()
  })
})

watch([signalWeight, imageWeight], ([newSig, newImg]) => {
  if (strategyInstance) {
    updateStrategyChart(newSig / 100, newImg / 100)
  }
})

watch(strategyType, (newType) => {
  if (strategyInstance) {
    updateStrategyChart(signalWeight.value / 100, imageWeight.value / 100, newType)
  }
})

const initStrategyChart = () => {
  if (strategyChart.value) {
    strategyInstance = echarts.init(strategyChart.value, 'dark')
    updateStrategyChart(0.6, 0.4)
  }
}

const updateStrategyChart = (sigWeight, imgWeight, strategy = strategyType.value) => {
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: ['特征提取', '特征对齐', strategy === 'weight' ? '加权融合' : '注意力融合'],
      axisLine: { lineStyle: { color: '#5a7cc9' } },
      axisLabel: {
        interval: 0,
        rotate: 0,
        color: '#a0bff0',
        fontSize: 13
      }
    },
    yAxis: {
      type: 'value',
      name: '处理强度',
      min: 0,
      max: 100,
      axisLine: { lineStyle: { color: '#5a7cc9' } },
      splitLine: { lineStyle: { color: 'rgba(93, 102, 224, 0.1)' } }
    },
    series: [
      {
        name: '信号处理强度',
        type: 'bar',
        stack: 'total',
        barWidth: '35%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4db8ff' },
            { offset: 1, color: '#1a53a0' }
          ])
        },
        data: [65, 58, 75 * sigWeight]
      },
      {
        name: '图像处理强度',
        type: 'bar',
        stack: 'total',
        barWidth: '35%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#9c42ff' },
            { offset: 1, color: '#5c1fa0' }
          ])
        },
        data: [70, 62, 75 * imgWeight]
      },
      {
        name: '融合效果',
        type: 'line',
        symbol: 'circle',
        symbolSize: 12,
        itemStyle: {
          color: '#ff6b6b'
        },
        lineStyle: {
          width: 3,
          type: 'dashed'
        },
        data: [65, 60, 85]
      },
      {
        name: '策略优化点',
        type: 'scatter',
        data: [
          { value: [0, 70], symbol: 'arrow', symbolSize: 20 },
          { value: [1, 65], symbol: 'arrow', symbolSize: 20 },
          { value: [2, strategyScore.value], symbol: 'arrow', symbolSize: 20 }
        ],
        itemStyle: {
          color: '#00ffa6'
        }
      }
    ]
  }

  if (strategyInstance) {
    strategyInstance.setOption(option, true)
  }
}
</script>

<style scoped>
.fusion-sandbox {
  display: flex;
  flex-direction: column;
  height: 60vh;
  background: rgba(16, 26, 48, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(93, 102, 224, 0.3);
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(65, 128, 240, 0.15);
  padding: 1.5vh 1.5vw;
  transition: all 0.3s ease;
}

.fusion-sandbox:hover {
  box-shadow: 0 0 30px rgba(93, 102, 224, 0.25);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
}

.panel-header h2 {
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #9c42ff;
}

.strategy-panels {
  display: flex;
  flex: 1;
  gap: 1.5vw;
}

.control-panel, .visualization-panel {
  flex: 1;
  background: rgba(15, 25, 50, 0.5);
  border-radius: 8px;
  padding: 1.5vh 1.5vw;
  display: flex;
  flex-direction: column;
}

.control-panel {
  max-width: 40%;
}

.visualization-panel {
  max-width: 60%;
}

.strategy-panels h3 {
  font-size: 1.05rem;
  margin: 0 0 1.5vh;
  color: #c0d1ff;
  font-weight: 500;
}

.strategy-selector {
  margin-bottom: 3vh;
}

.param-section {
  margin-bottom: 2.5vh;
  padding-bottom: 1.5vh;
  border-bottom: 1px solid rgba(93, 102, 224, 0.2);
}

.param-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}

.param-title {
  font-size: 0.9rem;
  color: #a0bff0;
}

.param-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #4db8ff;
}

.attention-section {
  background: rgba(25, 40, 80, 0.5);
  border-radius: 8px;
  padding: 1.5vh 1vw;
  margin-top: 2vh;
}

.attention-inputs {
  display: flex;
  gap: 1.5vw;
}

.input-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.input-group label {
  font-size: 0.85rem;
  color: #a0bff0;
  margin-bottom: 0.5vh;
}

.strategy-visualization {
  flex: 1;
  background: rgba(12, 20, 40, 0.5);
  border-radius: 8px;
  padding: 0.5vh 0.5vw;
}

.strategy-chart {
  width: 100%;
  height: 15vh; /* 调整高度 */
}

.performance-indicators {
  display: flex;
  gap: 1vw;
  margin-top: 1.5vh;
  height: 12vh; /* 调整高度 */
}

.indicator-card {
  flex: 1;
  background: rgba(18, 28, 54, 0.8);
  border-radius: 8px;
  padding: 1.5vh 1vw;
  border: 1px solid rgba(93, 102, 224, 0.3);
  display: flex;
  flex-direction: column;
}

.indicator-title {
  font-size: 0.9rem;
  color: #a0bff0;
  margin-bottom: 0.5vh;
}

.indicator-value {
  font-size: 1.5rem; /* 调整字体大小 */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  margin: 0.5vh 0; /* 调整间距 */
  background: linear-gradient(to bottom, #ffffff, #4db8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.indicator-value span {
  font-size: 0.9rem; /* 调整字体大小 */
  margin-left: 4px;
}

.indicator-progress {
  margin-top: 0.5vh;
}
</style>